<template>

  <div>
    <el-row>
      <el-col :span=18>
        <div class="<!--bg-purple -->grid-content">

          <el-dialog title="模组信息" :visible.sync="dialogFormVisible">
            <p style="height: 60px;" >模组id：{{moduleDetails.mid}}</p>
            <p style="height: 60px;" >模组名称：{{moduleDetails.name}}</p>
            <p style="height: 60px;" >模组概述：{{moduleDetails.describe}}</p>
            <p style="height: 60px;" >发布时间：{{moduleDetails.time_publish}}</p>
            <p style="height: 60px;" >模组类型（COC，DND）：{{moduleDetails.type}}</p>
            <p style="height: 60px;" >预计游玩时间下限：{{moduleDetails.short_time}}</p>
            <p style="height: 60px;" >预计游玩时间上限：{{moduleDetails.long_time}}</p>
            <p style="height: 60px;" >模组时间背景：{{moduleDetails.time_background}}</p>
            <p style="height: 60px;" >模组地点背景：{{moduleDetails.place_background}}</p>
            <p style="height: 60px;" >推荐人数：{{moduleDetails.recommend_people}}</p>
            
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleCancel()">返 回</el-button>
              <el-button type="primary" @click="downloadModule()">下载模组</el-button>
            </div>
          </el-dialog>

          <el-col :span="24">
            <div v-for="(item, index) in fenyeList" :key="index" >
              <div class="bg-beige grid-content">
                <span><el-link style="float: right;" @click="moduleDetail(item.mid)" type="primary">查看详情</el-link></span>
                <img :src="item.image_path" alt="图片未找到" class="img-class">
                <p>模组名称：{{item.name}}</p>
                <p>id: {{item.mid}}</p>
                <p>类型: {{item.type}}</p>
                <p>作者: {{item.author}}</p>
                <p>模组概述: {{item.describe}}</p>
                <p>创建时间：{{item.time_publish}}</p>
              </div>
            </div>

            <div style="text-align: center;margin-top: 30px;">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40, 50]"
                  :page-size="pagesize"
                  :total="total"
                  layout="total, prev, pager, next">
              </el-pagination>
            </div>


          </el-col>
        </div>
      </el-col>



      <el-col :span=6>
        <p class="Searchlabel" align="center" >搜索</p>
        <div class="grid-content">
          <el-col :span=20>
            <el-input class="search"placeholder="请输入搜索内容"v-model="input" clearable>
            </el-input>
          </el-col>
        </div>
        <div class="searchButton" style="margin-top:20px"><el-button type="primary" @click="searchModule(input)"plain>确 定</el-button></div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '90px',
      pagesize: 10,
      currentPage: 1,
      total:0,
      fenyeList:[],
      moduleList:[],
      moduleDetails:{},
      input:''

    }
  },
  created() {
    this.init(this.input)
    /*初始化结果*/
   /* this.searchModule(this.input)*/
/*    axios({
      methods: 'get',
      url: axios.defaults.baseURL + 'module/get',
     /!* params: this.infoUser*!/
    }).then((res) => {
      this.$message.success("接收到了信息")
      console.log(res)
      if (res.data.code === '000000') {
        this.moduleList=res.data.content
        this.fenyeList=this.moduleList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
        this.total=
      }else{
        this.$message.error(res.data.desc)
      }
    })*/


  },

  methods:{
    init(info){
      axios({
        methods: 'get',
        // url: axios.defaults.baseURL + 'module/getList/'+ info,
        url: axios.defaults.baseURL + 'module/getList?match='+info,
        params: info
      }).then((res) => {
        this.$message.success("接收到了信息")
        console.log(res)
        if (res.data.code === '000000') {
          this.moduleList=res.data.content
          let get_form=res.data.content;
          get_form.forEach((item,i) => {
            let p;
            try{
              p=require(item.image_path);
            }catch (f){
              p=require("../assets/1.jpg")
            }
            this.set(this.moduleList,)
          })
          this.total=res.data.content.length
          this.fenyeList=this.moduleList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
        }else{
          this.$message.error(res.data.desc)
        }
      })
    },

    searchModule(info){
      console.log(info);
      /*alert(info)*/
/*      axios({
        methods: 'get',
        url: axios.defaults.baseURL + 'module/getList/'+ info,
        params: info
      }).then((res) => {
        this.$message.success("接收到了信息")
        console.log(res)
        if (res.data.code === '000000') {
          this.moduleList=res.data.content
          this.total=res.data.content.length
          this.fenyeList=this.moduleList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
          alert(info)
        }else{
          this.$message.error(res.data.desc)
        }
      })*/
      this.init(info)

    },

    moduleDetail(mid){
      axios({
        methods: 'get',
        url: axios.defaults.baseURL + 'module/get/'+ mid ,
        params: mid
      }).then((res) => {
        this.$message.success("接收到了信息")
        console.log(res)
        if (res.data.code === '000000') {
          this.moduleDetails=res.data.content
        }else{
          this.$message.error(res.data.desc)
        }
      })
      alert(mid);
      this.dialogFormVisible = true
    },
    handleCancel(){  //取消
      this.dialogFormVisible=false;
    },
    downloadModule()
    {

    },

    handleSizeChange: function(val) {
      this.pagesize = val;
    },
    handleCurrentChange:function(currentPage){
      const PageSize = this.pagesize;
      this.currentPage=currentPage
      this.fenyeList=this.moduleList.slice((currentPage-1)*PageSize,currentPage*PageSize)
    }
  }
}
</script>

<style>
.img-class{
  width: 100%;
  height: 80%;
  display: block;
}
.card-class{
  height: 250px;
  width: max-content;
}
.bg-purple {
  background: #d3dce6;
  opacity: 0.8;
}
.bg-beige {
  min-height: 100px;
  background: beige;
}
.grid-content {
  border-radius: 4px;
  /*min-height: 36px;*/
}
.time {
  text-align: right;
  font-size: 8px;
  color: blueviolet;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.Searchlabel{
  font-weight: bold;
  font-size: 36px;
}

</style>